import 'package:flutter/material.dart';
import 'package:flutter_app/components/layout.dart';
import 'package:flutter_app/generated/l10n.dart';
class FundPage extends StatefulWidget {
  @override
  _FundPageState createState() => _FundPageState();
}

Widget TagItem(String text) {
  return Container(
    padding: EdgeInsets.symmetric(horizontal: 5.0, vertical: 2.0),
    decoration: BoxDecoration(
        color: Color(0xFFF9E5DC), borderRadius: BorderRadius.circular(3.0)),
    child: Text(
      text,
      style: TextStyle(fontSize: 11),
    ),
  );
}

Widget ListItemContainer(context,
    {Widget child,
    String title,
    String subTitle,
    List<Widget> tags,
    List<Widget> mainOptions,
    Widget button,
    Widget buttonBtn}) {
  return Container(
    width: MediaQuery.of(context).size.width,
    padding: EdgeInsets.all(15.0),
    decoration: BoxDecoration(
        color: Colors.white, borderRadius: BorderRadius.circular(8.0)),
    child: Column(
      children: [
        Text(
          title,
          style: TextStyle(fontSize: 17, fontWeight: FontWeight.w600),
        ),
        Text(
          subTitle,
          style: TextStyle(color: Colors.grey, fontSize: 11),
        ),
        SizedBox(height: 10),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: tags,
        ),
        SizedBox(height: 10),
        Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: mainOptions),
        SizedBox(height: 10),
        button,
        buttonBtn
      ],
    ),
  );
}

class TabItem {
  int id;
  String name;
  TabItem({this.id, this.name});
}

List<TabItem> TabItems = [
  TabItem(id: 0, name: '全部'),
  TabItem(id: 1, name: 'USDT'),
  TabItem(id: 2, name: 'BTC')
];

class _FundPageState extends State<FundPage> {
  int curTab = 0;
  List<Widget> getTabs() {
    return TabItems.map((e) {
      return Container(
        width: 80.0,
        margin: EdgeInsets.only(right: 10.0),
        child: FlatButton(
            color: curTab == e.id
                ? Colors.blueAccent
                : Colors.blueGrey.withOpacity(0.06),
            shape: RoundedRectangleBorder(
                side: BorderSide(
                    width: 1.0,
                    color: Colors.blueAccent,
                    style: BorderStyle.solid),
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(15.0),
                  topLeft: Radius.circular(15.0),
                  bottomLeft: Radius.circular(15.0),
                  bottomRight: Radius.circular(15.0),
                )),
            onPressed: () {},
            child: Text(
              e.name,
              style: TextStyle(
                fontSize: 13,
                color: curTab == e.id ? Colors.white : Colors.blue,
              ),
            )),
      );
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.dark,
        backgroundColor: Color(0xFF112041),
        elevation: 0,
        centerTitle: true,
      ),
      body: Column(
        children: [
          Expanded(
              child: Container(
            padding: EdgeInsets.symmetric(horizontal: 20.0),
            color: Color(0xFF112041),
            child: SingleChildScrollView(
              child: Column(
                children: [
                  Container(
                      width: MediaQuery.of(context).size.width,
                      child: ColumnStart(
                        children: [
                          Text(
                            '专业投研团队严格推选',
                            style: TextStyle(color: Color(0xFFAAB6F0)),
                          ),
                          Text('组合策略丰富风格多样',
                              style: TextStyle(color: Color(0xFFAAB6F0))),
                        ],
                      )),
                  //  tab
                  Container(
                    height: 30,
                    margin: EdgeInsets.symmetric(vertical: 20.0),
                    child: ListView(
                      scrollDirection: Axis.horizontal,
                      children: getTabs(),
                    ),
                  ),
                  Wrap(
                    runSpacing: 20,
                    children: [
                      ListItemContainer(
                        context,
                        title: 'Bitwise 10 指数套利基金',
                        subTitle: '限售额度 200 BTC +1,574.54 ETH',
                        tags: [
                          TagItem('锁定期1年'),
                          SizedBox(width: 5),
                          TagItem('组合投资(BTC+ETH)'),
                        ],
                        mainOptions: [
                          Column(
                            children: [
                              Text(
                                '+82.06%',
                                style: TextStyle(
                                    color: Colors.orange, fontSize: 18),
                              ),
                              Text(
                                '当前溢价',
                                style:
                                    TextStyle(color: Colors.grey, fontSize: 12),
                              ),
                            ],
                          ),
                          SizedBox(
                            width: 20,
                          ),
                          Column(
                            children: [
                              Text(
                                '\$64.65/\$35.51',
                                style: TextStyle(fontWeight: FontWeight.w700),
                              ),
                              Text(
                                'BITW市价/净值 02-06',
                                style:
                                    TextStyle(color: Colors.grey, fontSize: 12),
                              ),
                            ],
                          ),
                        ],
                        button: FlatButton(
                          minWidth: 200,
                          onPressed: () {},
                          child: Text(
                            '募集已结束',
                            style: TextStyle(fontSize: 13),
                          ),
                          color: Colors.grey.withOpacity(0.3),
                          textColor: Colors.white,
                          shape: StadiumBorder(),
                        ),
                        buttonBtn: GestureDetector(
                            onTap: () =>
                                Navigator.pushNamed(context, '/fund/invest'),
                            child: Text(
                              '查看我的投资',
                              style:
                                  TextStyle(fontSize: 12, color: Colors.orange),
                            )),
                      ),
                      SizedBox(height: 20),
                      ListItemContainer(
                        context,
                        title: '矩阵严选基金二号',
                        subTitle: '限售额度 200 BTC +1,574.54 ETH',
                        tags: [
                          //featured_fund 尊享基金
                          TagContainer(S.of(context).featured_fund, size: 11.0),
                          SizedBox(width: 5),
                          TagContainer('套利策略', size: 11.0),
                        ],
                        mainOptions: [
                          Column(
                            children: [
                              Text(
                                '+82.06%',
                                style: TextStyle(
                                    color: Colors.blueAccent, fontSize: 18),
                              ),
                              Text(
                                '当前溢价',
                                style:
                                    TextStyle(color: Colors.grey, fontSize: 12),
                              ),
                            ],
                          ),
                          SizedBox(
                            width: 20,
                          ),
                          Column(
                            children: [
                              Text(
                                '\$64.65/\$35.51',
                                style: TextStyle(fontWeight: FontWeight.w700),
                              ),
                              Text(
                                'BITW市价/净值 02-06',
                                style:
                                    TextStyle(color: Colors.grey, fontSize: 12),
                              ),
                            ],
                          ),
                        ],
                        button: FlatButton(
                          minWidth: 200,
                          onPressed: () {},
                          child: Text(
                            '距离开售还有08:12:23',
                            style: TextStyle(fontSize: 13),
                          ),
                          color: Colors.grey.withOpacity(0.3),
                          textColor: Colors.white,
                          shape: StadiumBorder(),
                        ),
                        buttonBtn: GestureDetector(
                            onTap: () =>
                                Navigator.pushNamed(context, '/fund/detail'),
                            child: Text(
                              '查看产品详情',
                              style: TextStyle(
                                  fontSize: 12, color: Colors.blueAccent),
                            )),
                      ),
                      Wrap(
                        children: [
                          Text(
                            '基金历史业绩不预示其未来表现，市场有风险，投资需谨慎，基金产品不构成任何投资咨询或顾问服务，是面向具有特定风险承受能力的投资者提供的产品，矩阵基金提示投资者在申购前务必阅读产品协议。',
                            style: TextStyle(color: Colors.blueGrey),
                          )
                        ],
                      ),
                      SizedBox(
                        width: 20,
                      ),
                    ],
                  )
                ],
              ),
            ),
          )),
          Container(
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(color: Colors.blueAccent[400]),
              child: TextButton(
                  onPressed: () {
                    Navigator.pushNamed(context, '/fund/hold');
                  },
                  child: Text(
                    '查看我的持仓',
                    style: TextStyle(color: Colors.white),
                  )))
        ],
      ),
    );
  }
}
